*{
    /* 初始化 取消页面元素的内外边框 */
    margin: 0;
    padding: 0;
}

.container{
    /* 弹性布局 水平 垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 让子元素垂直排列 */
    flex-direction: column;
    /* 100%窗口高度 宽度 */
    width: 100vw;
    height: 100vh;
    /* 背景径向渐变 */
    background: radial-gradient(circle at center,#555,#000);
}

.container a{
    /* 相对定位 */
    position: relative;
    /* 将a标签转为块级元素,不然无法设置宽高 */
    display: block;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 40px;
    color: plum;
    text-decoration: none;
    font-size: 20px;
    /* 这里加一个动画过渡
    最后的0.3秒时延迟时间 */
    transition: all 0.3s ease-in-out 0.3s;
    /* 我们是如果改变a标签的颜色 */
    /* hue-rotate是颜色滤镜.可以加不同的度数来改变颜色.这里我们用的是calc自动计算函数 */
    /* 以及var函数来调用我们给每一个a元素设置的不同的自定义属性1~5，然后分别乘以60度，就能够分别得到不同的颜色 */
    filter: hue-rotate(calc(var(--i)*60deg));

}


/* 这里将两个伪元素的相同样式写在一起 */
.container a::before,
.container a::after{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid plum;
    /* 这里加一个动画过渡
    最后的0.3秒时延迟时间 */
    transition: all 0.3s ease-in-out 0.3s;
}

.container a::before{
    top: 0;
    left: 0;
    /* 删除左边元素的右边框和下边框 */
    border-right: 0;
    border-bottom: 0;
}

.container a::after{
    right: 0;
    bottom: 0;
    /* 删除右边元素的左边框和上边框 */
    border-left: 0;
    border-top: 0;
}

.container a:hover{
    background-color: plum;
    color: #000;
    box-shadow: 0 0 50px plum;
    /* below下倒影 1px是倒影和元素相隔的距离,最后是个渐变色 */
    -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.3));
    /* 这里以上属性设置一下延迟时间 */
    transition-delay: 0.4s;
}

.container a:hover::before,
.container a:hover::after{
    width: 138px;
    height: 58px;
    /* 这里不需要延迟 */
    transition-delay: 0;
}